<!-- 订单申述 -->
<template>
	<view class="">
		<view class="form">
			<!-- <ul>
				<li>
					<text class="key">收款方式</text>
					<input type="text" v-model="status" @click="show" disabled/>
				</li>
			</ul> -->
			<view class="textarea" v-if="causeIndex==causeList.length-1 || status=='自定义'">
				<textarea v-model="reason" placeholder="请输入申述的具体原因~"></textarea>
			</view>
			<ul>
				<li>
					<text class="key">订单编号</text>
					<input type="text" v-model="orderNum" placeholder="请输入订单编号"/>
				</li>
			</ul>
		</view>
		<view class="but" @click="commission">
			<text>提交</text>
		</view>
		<popup-layer ref="popupRef" :direction="'top'">
			<view class="box">
				<view class="val" @click="close(item,index)" v-for="item,index in causeList" :key="index">{{item}}</view>
				<view class="val" style="border-top: 14rpx solid #f1f1f1;" @click="close">取消</view>
			</view>
		</popup-layer>
	</view>
</template>

<script>
	const app = getApp();
	const request = require('../../utils/request');
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		components:{
			popupLayer
		},
		data() {
			return {
				status:'自定义',
				boolShow:false,
				causeList:['退款原因','退款原因退款原因','退款原因原因','退款原因退款原因','退款原因原因退款原因','自定义'],
				causeIndex:-1,
				orderNum:'',
				reason:'',
				order_id:''
			}
		},
		onLoad(options) {
			console.log(options.order_id);
			if(options.order_id != null){
				this.order_id = options.order_id;
			}
			var formData = {
				order_id:this.order_id
			};
			request(app.globalData.api_url+'/v1/appeal/order_appeal', 'POST', formData).then((res) => {
				if(res.data.code==0){
					
					this.orderNum = res.data.data.order_no
				}else{
					
				}
			})
		},
		methods: {
			show(){
				this.$refs.popupRef.show(); // 或者 boolShow = rue
			},
			close(e,i){
				this.status = e;
				this.causeIndex = i;
				this.$refs.popupRef.close();// 或者 boolShow = false
			},
			commission(){
				let that = this;
				if(!that.reason){
					uni.showToast({
						title:'申述原因不能为空!',
						icon:'none'
					});
					return
				}
				if(!that.orderNum){
					uni.showToast({
						title:'订单编号不能为空!',
						icon:'none'
					});
					return
				}
				request(app.globalData.api_url+'/v1/user/order_ss', 'POST', {
					order_no:that.orderNum,
					reason:that.reason
				}).then((res) => {
					if(res.data.code == 0){
						uni.navigateBack()
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
					}
				});
			},
			getOrderNo:function(order_id){
				
				let that = this;
				
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.form{
		margin: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		ul{
			li{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #f1f1f1;
				padding:30rpx 0;
				.key{
					font-size: 28rpx;
					color:#333;
					line-height: 28rpx;
				}
				input{
					color: #333;
					font-size: 28rpx;
					line-height: 28rpx;
					text-align: right;
					width: 70%;
				}
				.placeholder{
					font-size: 28rpx;
					line-height: 28rpx;
				}
				
			}
		}
		.textarea{
			height: 200rpx;
			textarea{
				background-color: #f7f7f7;
				width: 94%;
				height: 81%;
				padding: 20rpx;
				font-size: 26rpx;
			}
		}
		
	}
	.but{
		background-color: #38c763;
		background:linear-gradient(to right,$uni-text-color-btn-left,$uni-text-color-btn-right);
		width: 90%;
		height: 86rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translate(-50%,0);
		text{
			color: #fff;
			font-size: 30rpx;
			line-height: 30rpx;
			letter-spacing: 2rpx;
		}
	}
	::v-deep{
		.popup-content{
			border-top-left-radius:30rpx;
			border-top-right-radius:30rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
		}
	} 
	.box{
		.val{
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #f1f1f1;
			font-size: 28rpx;
		}
	}
</style>